<template>
  <section id="search" class="filters card">
    <div class="filters__header">
      <h2>精准搜索 · 快速定位库存</h2>
      <p>
        支持型号、品牌、产地、货仓等多维度组合筛选，帮助采购团队迅速找到匹配备件。
      </p>
    </div>
    <form class="filters__form" @submit.prevent="handleSubmit">
      <div class="filters__grid">
        <label class="filters__field">
          <span>型号</span>
          <input
            v-model="localFilters.model"
            type="text"
            placeholder="请输入型号，如 6204"
          />
        </label>
        <label class="filters__field">
          <span>品牌</span>
          <select v-model="localFilters.brand">
            <option value="">全部品牌</option>
            <option v-for="brand in brands" :key="brand" :value="brand">
              {{ brand }}
            </option>
          </select>
        </label>
        <label class="filters__field">
          <span>产地</span>
          <select v-model="localFilters.origin">
            <option value="">全部产地</option>
            <option v-for="origin in origins" :key="origin" :value="origin">
              {{ origin }}
            </option>
          </select>
        </label>
        <label class="filters__field">
          <span>货仓号</span>
          <select v-model="localFilters.warehouse">
            <option value="">全部货仓</option>
            <option
              v-for="warehouse in warehouses"
              :key="warehouse"
              :value="warehouse"
            >
              {{ warehouse }}
            </option>
          </select>
        </label>
      </div>
      <div class="filters__actions">
        <button type="submit" class="btn btn--primary">开始搜索</button>
        <button type="button" class="btn btn--ghost" @click="handleReset">
          重置条件
        </button>
      </div>
    </form>
  </section>
</template>

<script setup>
import { reactive, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      model: "",
      brand: "",
      origin: "",
      warehouse: ""
    })
  },
  brands: {
    type: Array,
    default: () => []
  },
  origins: {
    type: Array,
    default: () => []
  },
  warehouses: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(["update:modelValue", "search", "reset"]);

const localFilters = reactive({ ...props.modelValue });

watch(
  () => props.modelValue,
  newValue => {
    Object.assign(localFilters, newValue);
  }
);

const handleSubmit = () => {
  emit("update:modelValue", { ...localFilters });
  emit("search");
};

const handleReset = () => {
  Object.assign(localFilters, {
    model: "",
    brand: "",
    origin: "",
    warehouse: ""
  });
  emit("update:modelValue", { ...localFilters });
  emit("reset");
};
</script>

<style scoped lang="scss">
.filters {
  margin-top: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filters__header {
  h2 {
    margin: 0 0 8px;
  }

  p {
    margin: 0;
    color: var(--gray-500);
  }
}

.filters__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.filters__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--gray-700);

  input,
  select {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    background: var(--gray-100);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.18);
      outline: none;
      background: #fff;
    }
  }
}

.filters__actions {
  display: flex;
  gap: 16px;

  @media (max-width: 640px) {
    flex-direction: column;
  }
}

.btn {
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &--primary {
    background: var(--primary-color);
    color: #fff;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(0, 82, 217, 0.22);
    }
  }

  &--ghost {
    background: var(--gray-100);
    color: var(--gray-700);

    &:hover {
      background: var(--gray-200);
    }
  }
}
</style>
